{% extends "visitor/base.html" %}

{% block title %}
Login
{% endblock title %}
{% block css %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<link href='/css/login.css' rel='stylesheet'/>
{% endblock css %}

{% block header %}
<div class="img">
    <img src="/images/icon.jpg" class="img-responsive img-rounded" alt="火箭" /><br>
    <p class="text-right">--- 火箭 🚀</p>
</div>
{% endblock header %}

{% block body %}
<div class="container body-form">
    <div class="form row">
        <form class="form-horizontal col-md-8 col-md-offset-2" id="login_form">
            <h3 class="form-title">登陆你的账号</h3>
            <div>
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Account" id="login_account"
                           name="account" autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" id="login_password"
                           name="password" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" name="remember"/> 记住 90 day
                    </label>
                    <hr/>
                    <a id="register_btn" class="">注册</a>
                </div>
                <hr />
                <div class="form-group">
                <h4>其他登录方式</h4>

                <a class="icon" href="https://github.com/login/oauth/authorize?scope=user:email&client_id=52b10cd3fff369999cd9">
                    <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16"
                         width="32">
                        <path fill-rule="evenodd"
                              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
                        </path>
                    </svg>
                </a>
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-success pull-right" id="login" value="登陆 "/>

                </div>
            </div>
        </form>
    </div>

    <div class="form row">
        <form class="form-horizontal col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2" id="register_form">
            <h3 class="form-title">创建一个账户</h3>
            <div>
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Account" id="account" name="account"
                           autofocus="autofocus"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" id="register_password"
                           name="password"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-check fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Re-type Your Password"
                           name="rpassword"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-envelope fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Nickname" id="nickname"
                           name="nickname"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-envelope fa-lg"></i>
                    <input class="form-control email required" type="text" id="email" placeholder="Email" name="email"/>
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-success pull-right" id="sign_btn" value="注册 "/>
                    <input type="button" class="btn btn-info pull-left" id="back_btn" value="返回"/>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock body%}

{% block script %}
<script src="/js/login.js"></script>
<script src="/js/navigationBar.js"></script>
{% endblock script%}

